<template>
	<view class="doy-pay-index">
		<view class="top-card padding_20rpx_0" :style="{ '--bg-image': `url(${recordBj})` }">
			<view class="flex-wrap top-border">
				<view class="flex-column top-num">
					<text>{{totelName(1588)}}</text>
					<view>D音转发</view>
				</view>
				<view class="flex-column top-num">
					<text>{{totelName(1588)}}</text>
					<view>K手转发</view>
				</view>
				<view class="flex-column top-num">
					<text>{{totelName(1588)}}</text>
					<view>视频号转发</view>
				</view>

			</view>
			<view class="flex-between margin-top_30rpx">
				<view class="flex-column top-num">
					<!-- <text>￥{{ topInfo.handlingFeesSum }}</text> -->
					<text>{{totelName(0)}}</text>
					<view>
						D音点评数
						<!-- <text style="color: #F7C401;font-size: 20rpx;margin-left: 6rpx;">去提现></text> -->
					</view>
				</view>
				<view class="flex-column top-num">
					<!-- 需修改 -->
					<text>{{totelName(0)}}</text>
					<view>美团点评数</view>
				</view>
				<view class="flex-column top-num">
					<!-- 需修改 -->
					<text>{{totelName(0)}}</text>
					<view>大众点评数</view>
				</view>
				<view class="flex-column top-num">
					<!-- 需修改 -->
					<text>{{totelName(0)}}</text>
					<view>小红薯点评数</view>
				</view>
			</view>
		</view>
		<view class="display-a margin-top_50rpx">
			<view class="label" @click="getLabel(0)" :style="selLabel == 0 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				全部</view>
			<view class="label" @click="getLabel(1)" :style="selLabel == 1 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				D音</view>
			<view class="label" @click="getLabel(2)" :style="selLabel == 2 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				K手</view>
			<view class="label" @click="getLabel(3)" :style="selLabel == 3? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				视频号</view>

			<!-- <view class="display-a margin-left-auto" @click="getlook()">
				<view class="color_757575">查看全部</view>
				<image class="matrix-4" :src="matrix4"></image>
			</view> -->


		</view>
		<view class="flex-end padding_20rpx_0  margin-right_30rpx">
			<view class="display-a-jc" @click="openPicker()">
				<view style="flex:1;margin-right: 20rpx;" v-if="startTime">
					<view class="font-size_26rpx">{{startTime+' '+endTime}}</view>
				</view>
				<view v-else class="input-t color_949DA6">日期筛选</view>
			<uni-icons color="#1a1a1a" type="down" size="15"></uni-icons> 
			</view>
		</view>
		<view class="totelblue ">
			累计转发 {{selLabel==0?(dyCount+ksCount+sphCount):selLabel==1?dyCount:selLabel==2? ksCount:sphCount}} (条)
		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view class="containerList flex-start-center" v-for="(item,index) in copywritingList" :key="index">
				<image class="imgList" :src="item.icon" mode=""></image>
				<view class="">
					<view class="font-weight_bold font-size_32rpx " style="margin: 0 0 30rpx 30rpx;">
						
						{{item.classification==1?'D音转发':item.classification==2?'K手转发': '视频号转发'}}
					</view>
					<view class="flex-start-center">
						<view class="font-size_26rpx" style="margin-left: 30rpx;">
							{{item.createTime}}
						</view>
						<!-- <view class="margin_0_14rpx">
							|
						</view>
						<view class="flex-start-center" style="color: #1A73F5;">
							<image class="linkImg" :src="Touchtouchlink" mode=""></image>
							复制链接
						</view> -->
					</view>
				</view>

			</view>
		</mescroll-body>
		<uv-tabbar :value="value" @change="changeTabbar">
			<uv-tabbar-item text="首页">


				<template v-slot:active-icon>
					<image class="icon" :src="none1"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" :src="none1"></image>
				</template>
			</uv-tabbar-item>

			<uv-tabbar-item text="记录">

				<template v-slot:active-icon>
					<image class="icon" :src="sel2 "></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" :src="none2"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="配置">
				<template v-slot:active-icon>
					<image class="icon" :src=" sel3 "></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" :src="none3"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="文案">

				<template v-slot:active-icon>
					<image class="icon" :src="sel4 "></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" :src="none4"></image>
				</template>
			</uv-tabbar-item>

		</uv-tabbar>
		<!-- <image class="matrix-3" @click="getIndex()" :src="matrix3"></image> -->
		<term-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" @confirm="confirm"></term-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
		// 		matrix3:this.$img.matrix3,
		// 		matrix7: this.$img.matrix7,
		
		// 		matrix17: this.$img.matrix17,
			
		// 		Touchtouchlink: this.$img.Touchtouchlink,
				
				none1:this.$imgs.none1,
				none2:this.$imgs.none2,
				none3:this.$imgs.none3,
				none4:this.$imgs.none4,
				
				sel1:this.$imgs.sel1,
				sel2:this.$imgs.sel2,
				sel3:this.$imgs.sel3,
				sel4:this.$imgs.sel4,
				recordBj:this.$imgs.recordBj,
			
				
				selLabel: 0,
				value: 1,
				copywritingList: [],

				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				formData: null,
				dyCount: '',
				ksCount: '',
				sphCount: '',
				/* 筛选时间 start */
				pickerVisable: false,
				defaultDate: [],
				startTime: null,
				endTime: null,
				form:{}
			}
		},
		computed: {
			totelName: function() {
				return function(num) {
					console.log(num);
					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}
				};
			}
		},
		onLoad() {
			this.queryTouchRecord()
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		},
		methods: {
			//返回首页
			getIndex() {
				uni.switchTab({
					url: '/pages/index/home'
				})
			},
			//日期筛选
			openPicker() {
				this.pickerVisable = true;
			},
			// 日期筛选
			confirm(e) {
				console.log('点击确定按钮，返回当前选择的值', e); // ['2021-06-01', '2021-07-01']
				this.startTime = e[0];
				this.endTime = e[1];
				if (this.startTime) {
					this.form.startTime = this.startTime + ' 00:00:00'
					this.form.endTime = this.endTime + ' 23:59:59'
				} else {
					delete this.form.startTime
					delete this.form.endTime
				}
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			},
			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.queryTouchRecordPage,
					data: {
						merchantId: uni.getStorageSync("merchantId"),

						page: scroll.num,
						limit: 10,
						classification: this.selLabel ? this.selLabel : undefined
					}
				});
				if (result.code == 2000) {
					this.mescroll.endByPage(result.data.list.length, result.data.count);
					this.total = result.data.count
					if (scroll.num == 1) this.copywritingList = [];
					this.copywritingList = this.copywritingList.concat(result.data.list);

					this.copywritingList.forEach((item) => {
						if (item.classification == 1) {
							item.icon = 'https://zhibocs.oss-cn-shenzhen.aliyuncs.com/1741055856247.png'

						} else if (item.classification == 2) {
							item.icon = 'https://zhibocs.oss-cn-shenzhen.aliyuncs.com/1741071886312.png'

						} else if (item.classification == 3) {
							item.icon = 'https://zhibocs.oss-cn-shenzhen.aliyuncs.com/1741071903103.png'

						}
					})

				}
			},
			async queryTouchRecord() {


				const result = await this.$http.post({
					url: this.$api.queryTouchRecordCount,
					data: {
						merchantId: uni.getStorageSync("merchantId"),

					}
				});
				if (result.code == 2000) {
					console.log(result.data)
					this.dyCount = result.data.dyCount
					this.ksCount = result.data.ksCount
					this.sphCount = result.data.sphCount
				}
			},


			getLabel(index) {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
				this.queryTouchRecord()
				this.selLabel = index;

			},
			changeTabbar(e) {
				console.log(e)
				if (e == 0) {
					this.$sun.navSwitch('/pages/index/index')

				} else if (e == 1) {

					this.$sun.navTo('/pagesA/creatCenter/TouchIt/index')
				} else if (e == 2) {
					this.$sun.navTo('/pagesA/creatCenter/TouchIt/touchConfiguration')
				} else {
					this.$sun.navTo('/pagesA/creatCenter/TouchIt/CopywritingList')
				}
			},

		}
	}
</script>

<style lang="less">
	.icon {
		width: 50rpx;
		height: 50rpx;
	}

	.doy-pay-index {
		.input-t {
			width: 120rpx;
			text-align: center;
		}

		.color_949DA6 {
			color: #949DA6;
		}

		.matrix-7 {
			width: 30rpx;
			height: 30rpx;
			margin-left: 6rpx;
		}

		.matrix-3 {
			width: 96rpx;
			height: 96rpx;
			position: fixed;
			right: 14rpx;
			bottom: 160rpx;
			z-index: 9;
		}

		.totelblue {
			color: rgb(26, 115, 245);
			margin: 30rpx 0;
			margin-left: 20rpx;

		}

		.containerList {
			margin-left: 20rpx;
			width: 712rpx;
			height: 160rpx;
			border-radius: 20rpx;

			background: rgb(255, 255, 255);
			padding: 20rpx;

			.imgList {
				width: 72rpx;
				height: 72rpx;
				border-radius: 72rpx;

			}

			.linkImg {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.top-card {
			background-image: (var(--bg-image));
			background-repeat: no-repeat;
			background-size: cover;

			.top-border {
				border-bottom: 2rpx solid rgba(255, 255, 255, 0.06);
			}

			.top-num {
				width: calc(100% / 3);
				padding: 30rpx 0 28rpx;

				text {
					font-size: 32rpx;
					font-weight: 500;
					color: rgb(255, 255, 255);
				}

				view {
					font-size: 24rpx;
					color: rgb(219, 225, 255);
					margin-top: 6rpx;
				}
			}

			.top-all-num {
				padding: 28rpx 0 60rpx;
				width: calc(100% / 3);

				image {
					border-radius: 100rpx;
					width: 52rpx;
					height: 52rpx;
				}

				.all-cls {
					text {
						color: rgb(255, 255, 255);
						font-size: 24rpx;
					}

					view {
						color: rgb(255, 255, 255);
						font-size: 32rpx;
						padding: 12rpx 0 10rpx;
						font-weight: 600;
					}
				}
			}
		}

		.v-content {
			border-radius: 40rpx;
			background-color: #fff;
			z-index: 10;
			margin-top: -30rpx;
			padding: 36rpx 20rpx;

			.char-padding {
				padding-bottom: 50rpx;

				.v-title {
					padding-bottom: 10rpx;

					text {
						background: rgb(75, 135, 254);
						width: 6rpx;
						height: 24rpx;
					}

					view {
						margin-left: 20rpx;
						color: rgb(51, 51, 51);
						font-size: 32rpx;
						font-weight: 700;
					}
				}

				.v-card2 {
					margin: 14rpx 0 -30rpx;
				}

				.v-card {
					margin: 14rpx 0 40rpx;
				}

				.v-card,
				.v-card2 {
					padding: 20rpx;
					border-radius: 20rpx;
					background: rgb(245, 248, 255);

					.transaction-cls {
						width: calc(100% / 3);

						text {
							color: rgb(153, 153, 153);
							font-size: 24rpx;
						}

						view {
							padding-top: 10rpx;
							color: rgb(51, 51, 51);
							font-size: 32rpx;
							font-weight: 700;
						}
					}
				}
			}
		}



		.label {
			background-color: #ECECEC;
			color: #A1A1A1;
			border-radius: 10rpx;
			padding: 8rpx 16rpx;
			display: inline-block;
			margin-left: 20rpx;
		}

		.matrix-4 {
			width: 24rpx;
			height: 24rpx;
			margin-left: 6rpx;
			margin-right: 20rpx;
		}
	}
</style>